<script setup>
import { onMounted, nextTick, ref, reactive, watch, computed, watchEffect } from 'vue'

</script>

<template>
    <div id="chun">
        <div id="cnm">
            <img id="one" src="../assets/img/ten.jpg" alt="">
            <div id="two">

            </div>
        </div>

    </div>
</template>

<style lang="less" scoped>
#chun {
    height: 100vh;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;

    #cnm {

        // 悬停
        &:hover {

            // #one和#two的放大效果
            #one {
                transform: scale(1.1);
            }

            #two {
                transform: scale(1.1);
            }
        }

        img {
            -webkit-user-drag: none;
        }

        #one {
            height: 200px;
            width: 200px;
            z-index: 999;
            border: 5px solid #fff;
            user-select: none;
        }

        #two {
            position: absolute;
            height: 200px;
            width: 200px;
            background-color: #fff;
            border: 5px solid #fff;
        }
    }

}
</style>